<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>position</title>

<style >

.title {
font-size: 30px;
background: darkgray;
}

h1 {
 color: blue;
}

/*------透明度演示(IE8浏览器以上)-----*/
.div1 {
background: blue;
width: 300px;
height: 300px;
opacity: 0.6;
color: red;
/*父级的透明度会影响子级*/
}

/*------利用定位和透明度模拟阴影-----*/

/*
利用z-index提升层级
由于使用position会提升层级,所以.continer 和shadow都要使用定位,不能只使用其中一个
*/

.box{
width: 300px;
height: 300px;
position: relative;
background: red;
margin: 0px auto;

}

.box .continer {
  width: 300px;
  height: 300px;
  z-index: 2;
  background: blue;
  position: absolute;

}

.box .shadow{
  width: 300px;
  height: 300px;
  z-index: 1;
  position: absolute;
  right: -6px;
  bottom: -6px;
  background: black;
  opacity: 0.5;
  /*filter: alpha(opacity=50);     ie6和7 透明度的写法 0~100 */
}

</style>

</head>

<body>
<!--  -->
<h1>透明度演示</h1>

<div class="div1">
  <p>你好,很高兴认识你</p>
</div>


<hr>


<h1>position和zindex模拟阴影</h1>
<div class="box">
  <div class="continer">内容</div>
<div class="shadow">

</div>

</div>




</body>
</html>
